<div id="configSet" class="conig-set form-horizontal" v-cloak>

    <div v-if="type=='xyvenue'">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">名称：</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" v-model="detailForm.name" placeholder="请输入名称" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">默认门店：</label>
            <div class="col-xs-12 col-sm-7">
                <div class="flex">
                    <input class="form-control" type="text" v-model="detailForm.store_id">
                    <button class="btn btn-success" @click="storeSelect('store_id')"><i class="fa fa-upload"></i>选择门店</button>
                    <button class="btn btn-danger" @click="storeCancel('store_id')" v-if="detailForm.store_id"><i class="fa fa-close"></i>取消选择</button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">Logo：</label>
            <div class="col-xs-12 col-sm-7">
                <div class="flex">
                    <input class="form-control" type="text" v-model="detailForm.logo">
                    <button class="btn btn-success" @click="attSelect('logo')"><i class="fa fa-upload"></i>选择图片</button>
                </div>
                <div class="pview" v-if="detailForm.logo">
                    <img :src="detailForm.logo" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">用户默认头像：</label>
            <div class="col-xs-12 col-sm-7">
                <div class="flex">
                    <input class="form-control" type="text" v-model="detailForm.useravatar">
                    <button class="btn btn-success" @click="attSelect('useravatar')"><i class="fa fa-upload"></i>选择图片</button>
                </div>
                <div class="pview" v-if="detailForm.useravatar">
                    <img :src="detailForm.useravatar" />
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">可提前预定天数:</label>
            <div class="col-xs-12 col-sm-4">
                <input data-rule="required" class="form-control" v-model="detailForm.advancedays" type="number">
            </div>
            <label class="control-label col-xs-12 col-sm-3" style="text-align: left;">填0则只能当天预定，会员等级中设置优先</label>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">每天可预定小时:</label>
            <div class="col-xs-12 col-sm-4">
                <input placeholder="填写数字，可保留2位小数" class="form-control" v-model="detailForm.dayhour" type="number">
            </div>
            <label class="control-label col-xs-12 col-sm-3" style="text-align: left;">会员等级中设置优先</label>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">退订需提前小时:</label>
            <div class="col-xs-12 col-sm-4">
                <input placeholder="填写数字，可保留2位小数" class="form-control" v-model="detailForm.returnhour" type="number" />
            </div>
            <label class="control-label col-xs-12 col-sm-3" style="text-align: left;">到订单预定日期超过n小时才能退订。</label>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">节假日:</label>
            <div class="col-xs-12 col-sm-4">
                <textarea rows="8" class="form-control" v-model="detailForm.holidays">{{detailForm.holidays}}</textarea>
            </div>
            <label class="control-label col-xs-12 col-sm-3" style="text-align: left;">用于节假日特价判断，务必填写正确的日期 ，格式2023-12-07多个用英文逗号隔开。</label>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">用户协议：</label>
            <div class="col-xs-12 col-sm-7">
                <div class="flex">
                    <input class="form-control" type="text" v-model="detailForm.agreement">
                    <button class="btn btn-success" @click="articleSelect('agreement')"><i class="fa fa-upload"></i>选择文章</button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">隐私政策：</label>
            <div class="col-xs-12 col-sm-7">
                <div class="flex">
                    <input class="form-control" type="text" v-model="detailForm.privacy">
                    <button class="btn btn-success" @click="articleSelect('privacy')"><i class="fa fa-upload"></i>选择文章</button>
                </div>
            </div>
        </div>
        
    </div>
    
    <div v-if="type=='wxminiprogram'">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">AppID：</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" v-model="detailForm.app_id" placeholder="请输入AppID" class="form-control"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">AppSecret：</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" v-model="detailForm.secret" placeholder="请输入AppSecret" class="form-control"/>
            </div>
        </div>
    </div>

    <div v-if="type=='wxOfficialAccount'">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">AppID：</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" v-model="detailForm.app_id" placeholder="请输入AppID" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">AppSecret：</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" v-model="detailForm.secret" placeholder="请输入AppSecret" class="form-control"/>
            </div>
        </div>
    </div>

    <div v-if="type=='wechat'">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">商户号：</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" v-model="detailForm.mch_id" placeholder="请输入商户号" class="form-control"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">支付密钥：</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" v-model="detailForm.key" placeholder="请输入支付密钥" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">商户证书：</label>
            <div class="col-xs-12 col-sm-7">
                <div class="flex">
                    <input class="form-control" type="text" v-model="detailForm.cert_client">
                    <button class="btn btn-success" @click="attSelect('cert_client')"><i class="fa fa-upload"></i>选择证书</button>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">商户Key证书：</label>
            <div class="col-xs-12 col-sm-7">
                <div class="flex">
                    <input class="form-control" type="text" v-model="detailForm.cert_key">
                    <button class="btn btn-success" @click="attSelect('cert_key')"><i class="fa fa-upload"></i>选择证书</button>
                </div>
            </div>
        </div>
        
    </div>

    <div v-if="type=='appstyle'">

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">主色调：</label>
            <div class="col-xs-12 col-sm-7 form-inline">
                <input type="text" class="form-control" v-model="detailForm.mainColor"> 
                <input id="color" class="form-control" type="color" v-model="detailForm.mainColor">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">导航栏背景颜色：</label>
            <div class="col-xs-12 col-sm-7 form-inline">
                <input type="text" class="form-control" v-model="detailForm.navBarBgColor"> 
                <input id="color" class="form-control" type="color" v-model="detailForm.navBarBgColor">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">导航栏字体颜色：</label>
            <div class="col-xs-12 col-sm-7 form-inline">
                <select class="form-control" v-model="detailForm.navBarFrontColor">
                    <option value="#ffffff">白色</option>
                    <option value="#000000">黑色</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">页面背景颜色：</label>
            <div class="col-xs-12 col-sm-7 form-inline">
                <input type="text" class="form-control" v-model="detailForm.pageBgColor"> 
                <input id="color" class="form-control" type="color" v-model="detailForm.pageBgColor">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">文字主色调：</label>
            <div class="col-xs-12 col-sm-7 form-inline">
                <input type="text" class="form-control" v-model="detailForm.textMainColor"> 
                <input id="color" class="form-control" type="color" v-model="detailForm.textMainColor">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">文字浅色调：</label>
            <div class="col-xs-12 col-sm-7 form-inline">
                <input type="text" class="form-control" v-model="detailForm.textLightColor"> 
                <input id="color" class="form-control" type="color" v-model="detailForm.textLightColor">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3">价格文字颜色：</label>
            <div class="col-xs-12 col-sm-7 form-inline">
                <input type="text" class="form-control" v-model="detailForm.textPriceColor"> 
                <input id="color" class="form-control" type="color" v-model="detailForm.textPriceColor">
            </div>
        </div>
       
    </div>

    <div class="form-group" style="position: fixed; bottom: -15px;left: 0;width: 110%;background-color: #ecf0f1;padding: 15px 20%;">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-7">
            <div @click="submitFrom('yes')" class="btn btn-primary btn-embossed">{:__('OK')}</div>
            <div @click="submitFrom" class="btn btn-default btn-embossed">{:__('Cancel')}</div>
        </div>
    </div>
</div>

<style>
    [v-cloak]{
        display: none;
    }
    .conig-set{padding-bottom: 100px;}
    .flex{display: flex;}
    .bfb{padding: 0 15px;background-color: #f4f4f4;}
    button{margin-left: 10px;}
    .pview{max-width: 200px;background: #f2f2f2;margin-top: 15px;}
    .pview img{width: 100%;}
    #color {
        width: 31px;
        height: 31px;
        background-color: #fff;
        cursor: default;
        border-width: 1px;
        border-style: solid;
        border-color: #d2d6de;
        border-image: initial;
        padding: 0;
    }
</style>